<template>
    <view class="container">
        <view class="header">
            <view class="mid">
                <view class="mid-item up">
                    <view class="sub-left">
                        <text class="text">今日线索</text>
                        <text class="title">{{todayClueNum}}</text>
                    </view>
                    <view class="sub-right">
                        <text class="text">未跟进量</text>
                        <text class="title">{{noFollowNum}}</text>
                    </view>
                </view>
                <view class="mid-item down">
                    <view class="sub-left">
                        <text class="text">今日待办</text>
                        <text class="title">{{todayToDoNum}}</text>
                    </view>
                    <view class="sub-right">
                        <text class="text">未跟进量</text>
                        <text class="title">{{noDealNum}}</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="main">
            <view class="main-title" @click="goToClub">
                <view class="left">待跟进线索</view>
                <view class="right">更多</view>
                <view class="icon iconfont iconenter"></view>
            </view>

            <view class="top-container">
                <view v-if="clubNoData">
                    <noData noDataHeight="300px"></noData>
                </view>

                <view v-else>
                    <view v-bind:key="item.ClueID" class="top-item" v-for="item in clueList">
                        <view class="title">
                            <view class="left">{{item.PlateNo}}</view>
                            <view class="right">
                                <view :data-culbid="item.ClueID" @click="goToEdit" class="icon iconfont iconbianji"></view>
                            </view>
                        </view>

                        <view class="top-inner">
                            <view class="inner-left">
                                <view class="top-item-text">姓名：{{item.UserName}}</view>
                                <view class="top-item-text">线索类型：{{item.ClueTypeName}}</view>
                                <view class="top-item-text">品牌车型：{{item.Brand}}{{item.Model}}</view>
                                <view class="top-item-text">保险到期时间：{{item.EndDate}}</view>
                                <view class="top-item-text">车辆初登时间：{{item.RegisterDate}}</view>
                                <view class="top-item-text">线索分配时间：{{item.Assign}}</view>
                            </view>
                            <view class="inner-right">
                                <view class="inner-right-text">{{item.PurchaseStep}}</view>
                                <view class="inner-right-text status">{{item.FlowStep}}</view>
                            </view>
                        </view>

                        <view class="top-footer">
                            <view class="footer-item" :data-mobile="item.Mobile" :data-clueid="item.ClueID" @click="cMakeCall">
                                <text class="icon iconfont icondianhua"></text>
                                <text class="icon-text">外呼</text>
                            </view>
                            <view class="footer-item" @click="isShowEditTap" :data-todoid="0" :data-clueid="item.ClueID">
                                <text class="icon iconfont iconsettingsfill"></text>
                                <text class="icon-text">设置</text>
                            </view>
                        </view>
                    </view>

                    <view class="load-more" v-if="isShowMore">
                        <uni-load-more iconType="circle" :status="status" />
                    </view>

                </view>

            </view>


            <view class="main-title" @click="goToToDo">
                <view class="left">今日代办</view>
                <view class="right">更多</view>
                <view class="icon iconfont iconenter"></view>
            </view>

            <view class="down-container">
                <view v-if="toNoData">
                    <noData noDataHeight="300px"></noData>
                </view>
                <view v-else>
                    <view class="top-item" v-for="item in todoList" :data-todoid="item.TodoID" :data-clueid="item.ClueID">
                        <view class="title">
                            <view class="left">{{item.PlateNo}}<text>{{item.TodoDate}}</text></view>
                            <view class="right">
                                <!-- <view class="icon iconfont iconunfold"></view> -->
                            </view>
                        </view>

                        <view class="top-detail">
                            <view class="top-inner">
                                <view class="inner-left">
                                    <view class="top-item-text">姓名：{{item.UserName}}</view>
                                    <view class="top-item-text">线索类型：{{item.ClueTypeName}}</view>
                                    <view class="top-item-text">品牌车型：{{item.Brand}}{{item.Model}}</view>
                                    <view class="top-item-text">保险到期时间：{{item.EndDate}}</view>
                                    <view class="top-item-text">上次沟通时间：{{item.CreateDate}}</view>
                                </view>
                                <view class="inner-right">
                                    <view class="inner-right-text">{{item.PurchaseStep}}</view>
                                    <view class="inner-right-text status">{{item.FlowStep}}</view>
                                    <view class="inner-right-text status">{{item.IsRead}}</view>
                                </view>
                            </view>
                            <view class="footer-text">{{item.Comment}}</view>

                            <view class="top-footer">
                                <view class="footer-item" :data-mobile="item.Mobile" @click="cMakeCall">
                                    <text class="icon iconfont icondianhua"></text>
                                    <text class="icon-text">外呼</text>
                                </view>
                                <view class="footer-item" @click="isShowEditTap" :data-todoid="item.TodoID"
                                    :data-clueid="item.ClueID">
                                    <text class="icon iconfont iconsettingsfill"></text>
                                    <text class="icon-text">设置</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="load-more" v-if="isShowMore">
                        <uni-load-more iconType="circle" :status="status" />
                    </view>
                </view>
            </view>
        </view>

        <!-- 设置 -->
        <edit :isShowEdit="isShowEdit" :editTitle="editTitle" @evenHideEdit="isHideEditTap" @evenEditConfirm="confirm"
            :editType="editType" :todoId="todoId" :clueId="clueId"></edit>

    </view>
</template>

<script>
    import {
        toToStatistic,
        clueStatistic,
        clubList,
        addToDo,
        toDoList,
        bindTel
    } from '@/utils/api.js';
    import customStatusBar from '@/components/customStatusBar/customStatusBar.vue';
    import {
        cacheSet,
        cacheGet
    } from '@/utils/cache.js';
    import noData from '@/components/noData/noData.vue';
    import edit from '@/components/edit/edit.vue';
    import util from '@/utils/util.js';
    export default {
        components: {
            customStatusBar,
            edit,
            noData
        },
        data() {
            return {
                todayClueNum: 0, //今日线索数量
                noFollowNum: 0, //未跟进量
                todayToDoNum: 0, //今日待办
                noDealNum: 0, //未处理量
                cluePageIndex: 1, //线索页码
                cluepageSize: 3, //线索数据条数
                toDoPageIndex: 1, //待办页码
                toDopageSize: 3, //待办数据条数
                clueList: [], //线索列表
                clubNoData: false, //线索列表暂无数据
                purchaseStepArr: ['全部', '低', '中', '高'], //线索意愿等级
                flowStepArr: ['待跟进', '跟进中', '成交', '战败'], //线索状态
                isShowEdit: false,
                editTitle: '', //编辑title
                editType: 'todo', //设置的类型   todo 代办  clue  线索
                todoId: 0, //代办id
                clueId: 0, //线索id

                toNoData: false, //待办暂无数据
                todoList: [], //待办数据
            }
        },
        onShow() {
            //获取线索统计
            this.getClueStatistic();
            //获取待办统计
            this.getToToStatistic();
            //获取线索
            this.getClubList();
            //获取代办
            this.getToDoList();
        },
        methods: {
            //前往编辑页面
            goToEdit(e) {
                let id = e.currentTarget.dataset.culbid;
                let query = '?clubid=' + id;
                uni.navigateTo({
                    url: '/pages/clue/clubCenter' + query
                })
            },
            //前往待办页面
            goToToDo() {
                uni.switchTab({
                    url: '/pages/todo/todo'
                })
            },
            //前往线索页面
            goToClub() {
                uni.switchTab({
                    url: '/pages/clue/clue'
                })
            },
            //获取待办统计
            getToToStatistic() {
                let self = this;
                util.safeRquest().then(function(userId) {
                    toToStatistic(userId).then(function(res) {
                        let rdata = res.data;
                        if (rdata.status == 0) {
                            self.todayToDoNum = rdata.data.Total;
                            self.noDealNum = rdata.data.UnRead;
                        }
                    }).catch(function(err) {

                    })
                }).catch(function() {

                })
            },
            //获取线索统计
            getClueStatistic() {
                let self = this;
                util.safeRquest().then(function(userId) {
                    clueStatistic(userId).then(function(res) {
                        let rdata = res.data;
                        if (rdata.status == 0) {
                            self.todayClueNum = rdata.data.Total;
                            self.noFollowNum = rdata.data.UnRead;
                        }
                    }).catch(function(err) {

                    })
                }).catch(function() {

                })
            },
            //获取线索列表
            getClubList() {
                let self = this;
                util.safeRquest().then(function(userId) {
                    let data = {
                        BeginDate: "",
                        EndDate: "",
                        UserID: userId,
                        FlowStep: 0,
                        PurchaseStep: -1,
                        BrandID: -1,
                        ModelID: -1,
                        PageSize: self.cluepageSize,
                        PageIndex: self.cluePageIndex
                    };
                    clubList(data).then(function(res) {
                        let rdata = res.data;
                        if (rdata.status == 0 && rdata.data.rows.length > 0) {
                            let list = rdata.data.rows;
                            list.map(function(item, index) {
                                //保险到期时间
                                item.EndDate = util.formatDate(item.EndDate, 'yyyy-MM-dd');
                                //车辆初登时间 （注册时间）
                                item.RegisterDate = util.formatDate(item.RegisterDate,
                                    'yyyy-MM-dd');
                                //线索分配时间
                                item.Assign = util.formatDate(item.Assign, 'yyyy-MM-dd hh:mm');
                                //线索意愿等级
                                item.PurchaseStep = self.purchaseStepArr[item.PurchaseStep];
                                //线索跟进状态
                                item.FlowStep = self.flowStepArr[item.FlowStep];
                            })
                            self.clueList = list;
                            self.clubNoData = false;
                        } else {
                            self.clubNoData = true;
                        }
                    }).catch(function(err) {
                        self.clubNoData = true;
                        uni.showToast({
                            title: err.message,
                            icon: 'none'
                        })
                    })
                }).catch(function() {

                })
            },
            //显示设置
            isShowEditTap(e) {
                let ds = e.currentTarget.dataset;
                console.log(ds)
                this.todoId = ds.todoid; //当前被选中的id
                this.clueId = ds.clueid; //当前被选中的id

                if (ds.todoid == "0") {
                    this.editType = "clue"; //设置的类型   todo 代办  clue  线索
                }
                if (this.editType == "todo") {
                    this.editTitle = "待办设置";
                } else {
                    this.editTitle = "线索设置";
                }
                this.isShowEdit = true;
            },
            //隐藏设置
            isHideEditTap() {
                this.isShowEdit = false;
            },
            //线索设置提交
            confirm(info) {
                let self = this;
                if (!!info) {
                    self.isHideEditTap();
                    addToDo(info).then(function(res) {
                        let rdata = res.data;
                        if (rdata.status == 0 && rdata.data) {
                            if (info.preTodoID > 0) {
                                self.getToDoList();
                            } else {
                                self.getClubList();
                            }
                            uni.showToast({
                                title: '设置成功'
                            });
                        } else {
                            uni.showToast({
                                title: '设置失败',
                                icon: 'none'
                            })
                        }
                    }).catch(function(err) {
                        uni.showToast({
                            title: err.message,
                            icon: 'none'
                        })
                    })
                }

            },
            //外呼
            cMakeCall(e) {
                let ds = e.currentTarget.dataset;
                console.log(ds)
                let mobiles = [];
                let mobile = ds.mobile; //当前被选中的id
                let clueId = ds.clueid; //当前被选中的id
                if (util.isMoile(mobile)) {
                    mobiles.push(mobile);
                }

                util.safeRquest().then(function(userId) {
                    let info = {
                        UserID: userId,
                        ClueID: clueId
                    };

                    bindTel(info).then(function(res) {
                        let rdata = res.data;
                        if (rdata.status == 0) {
                            if (rdata.data.code == '0') {
                                mobiles.push(rdata.data.data.telX);
                            }
                        }
                        console.log(mobiles)
                        if (mobiles.length == 1) {
                            uni.makePhoneCall({
                                phoneNumber: mobiles[0]
                            })
                        } else if (mobiles.length == 2) {
                            uni.showActionSheet({
                                itemList: mobiles,
                                success: function(res) {
                                    uni.makePhoneCall({
                                        phoneNumber: mobiles[res.tapIndex]
                                    });
                                },
                            })
                        } else {
                            uni.showToast({
                                title: '电话拨号失败,请稍后重试',
                                icon: 'none'
                            });
                        }
                    });
                });

            },
            //获取待办列表
            getToDoList() {
                let self = this;
                util.safeRquest().then(function(userId) {
                    let info = {
                        UserID: userId,
                        IsRead: 0,
                        TodoDate: util.formatDate(new Date(), 'yyyy-MM-dd'),
                        PageSize: self.toDopageSize,
                        PageIndex: self.toDoPageIndex
                    };
                    toDoList(info).then(function(res) {
                        let rdata = res.data;
                        if (rdata.status == 0 && rdata.data.rows.length > 0) {
                            let list = rdata.data.rows;
                            list.map(function(item, index) {
                                //标记的时间
                                item.TodoDate = util.formatDate(item.TodoDate, 'hh:mm');
                                //保险到期时间
                                item.EndDate = util.formatDate(item.EndDate, 'yyyy-MM-dd');
                                //上次沟通时间
                                item.CreateDate = util.formatDate(item.CreateDate, 'yyyy-MM-dd');
                                //线索意愿等级
                                item.PurchaseStep = self.purchaseStepArr[item.PurchaseStep];
                                //线索跟进状态
                                item.FlowStep = self.flowStepArr[item.FlowStep];
                                //是否已处理
                                item.IsRead = item.IsRead == 0 ? '未处理' : '已处理';
                            })
                            self.todoList = list;
                            self.toNoData = false;
                        } else {
                            self.todoList = [];
                            self.toNoData = true;
                        }
                    }).catch(function(err) {
                        self.toNoData = true;
                        uni.showToast({
                            title: err.message,
                            icon: 'none'
                        })
                    })
                }).catch(function() {

                })

            }

        }
    }
</script>

<style>
    .header {
        box-sizing: border-box;
        width: 100%;
        background-color: #3c67c2;
        padding: 50upx 30upx;
    }

    .header .mid {}

    .header .mid .mid-item {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background-color: #def1f9;
        border-radius: 14upx;
        padding: 10upx 8upx;
        margin-bottom: 20upx;
    }

    .header .mid .mid-item .sub-left {
        flex: 1;
        background-color: #3c67c2;
        padding: 6upx 4upx;
        border-radius: 8upx;
        text-align: center;
        color: #fff;
    }

    .header .mid .mid-item .sub-right {
        flex: 1;
        color: #3c67c2;
        text-align: center;
    }

    .header .mid .mid-item .title {
        font-size: 32upx;
    }

    .header .mid .mid-item .text {
        font-size: 28upx;
        margin-right: 10upx;
    }

    .main {
        margin-top: -20upx;
        border-radius: 16upx 16upx 0 0;
        background-color: rgba(216, 216, 216, .3);
        overflow: hidden;
        padding-bottom: 10upx;
    }

    .main-title {
        height: 50upx;
    }
</style>
